﻿//Turn Console Logging On/Off for framework events
ME_CONSOLE_LOG = false;
SKETCH_COLOR = "#f00";
SKETCH_WIDTH = 8;

//Add custom event handlers.  You may delete the ones you don't use
ME_Client.AddEventHandler('SignatureCapture', function () {
    return {
        afterPanelRendered: function (panel) {
            var valholder = $(".sketch-value");
            // Check for the sketch value hidden field
            if (valholder.length !== 0) {
                //move the palette

                var palette = $(".palette");
                if (palette.length !== 0) {
                    var cl = palette.clone();
                    $(cl).appendTo($("body"));
                    palette.remove();
                }

                var canvas = $(".sketch-canvas")[0];
                var context = canvas.getContext('2d');
                var linecolor = SKETCH_COLOR;

                var drawer = {
                    isDrawing: false,
                    touchstart: function (coors) {
                        context.beginPath();
                        context.moveTo(coors.x, coors.y);
                        this.isDrawing = true;
                    },
                    touchmove: function (coors) {
                        //if (this.isDrawing) {
                        context.lineTo(coors.x, coors.y);
                        context.lineWidth = SKETCH_WIDTH;
                        context.strokeStyle = SKETCH_COLOR;
                        context.stroke();
                        //}
                    },
                    touchend: function (coors) {
                        if (this.isDrawing) {
                            this.isDrawing = false;
                        }
                    }
                };

                function draw(event) {
                    // get the touch coordinates
                    var pos = $(".sketch-canvas").offset();
                    var coors = {
                        x: event.targetTouches[0].pageX - pos.left,
                        y: event.targetTouches[0].pageY - pos.top
                    };
                    // pass the coordinates to the appropriate handler
                    drawer[event.type](coors);
                }

                function drawend(event) {
                    drawer.isDrawing = false;
                    var canvas = $(".sketch-canvas")[0];
                    //Save bits of drawing to hidden field
                    valholder.val(canvas.toDataURL("image/png"));
                }

                var pos = $(".sketch-canvas").offset();
                var wid = $(document).width() - 40;
                var hid = $(document).height() - (20 + pos.top);

                var bgimg = $(".sketch-background");
                if (bgimg.length !== 0) {
                    linecolor = SKETCH_COLOR;
                    bgimg.load(function () {
                        var imgw = $(this).width();
                        var imgh = $(this).height();
                        var ix = 0;
                        var iy = 0;
                        if (imgw > wid) {
                            $(canvas).attr("width", wid);
                            ix = 0 - ((imgw - wid) / 2);
                        } else {
                            $(canvas).attr("width", imgw);
                        }

                        if (imgh > hid) {
                            $(canvas).attr("height", hid);
                            ix = 0 - ((imgh - hid) / 2);
                        } else {
                            $(canvas).attr("height", imgh);
                        }
                        context.drawImage(bgimg[0], ix, iy);
                    });
                } else {
                    $(canvas).attr("width", wid);
                    $(canvas).attr("height", hid);
                }

                canvas.addEventListener('touchstart', draw, false);
                canvas.addEventListener('touchmove', draw, false);
                canvas.addEventListener('touchend', drawend, false);
                document.ontouchmove = function (e) { e.preventDefault(); };
            } else {
                document.ontouchmove = function (e) { return true; }
            }
        }
    };
});

function OpenPalette(r) {
    var caller = r.ElementRef;
    var palette = $(".palette");
    palette.show();

    var pos = caller.position();
    palette.css("left", pos.left + "px");
    palette.css("top", (pos.top + 48) + "px");

    palette.find(".color").each(function () {
        var bt = $(this);
        bt.css("background-color", bt.attr("val"));
        bt.click(function () {
            $(".color.sel").removeClass("sel");
            $(this).addClass("sel");
            SKETCH_COLOR = $(this).attr("val");
            palette.hide();
        });
    });

}